<script setup lang="ts">
import {userStore} from "@/stores/user.ts";
import {UgJoditEditor} from 'ug-jodit-editor'
import {ref} from 'vue'
import UploadFile from '@/components/UploadFile'
import {UseAppStore} from '@/stores/app.ts'

const appStore=UseAppStore()

const dataForm = ref({
  avatar: '',
  avatar1: '',
})

const editorContent = ref('')
const userStores = userStore();
const test = (type: boolean) => {
  if (type) {
    userStores.messageCount += 1
  } else {
    userStores.messageCount -= 1
  }
}
const tests = () => {
  console.log("file:", dataForm.value)
}

const upload=ref<string>('<upload-file type="box" v-model:file-src="dataForm.avatar" drag chunked accept=".png,.jpg,.jpeg,.svg"/>')
const editor=ref<string>('<ug-jodit-editor v-model:value="editorContent"/>')

</script>

<template>
  <n-card>
    <n-divider title-placement="left">主题主要颜色</n-divider>
    <n-space>
      <n-button type="primary" @click="test">primary</n-button>
      <n-button type="success" @click="test(false)">success</n-button>
      <n-button type="warning">warning</n-button>
      <n-button type="error">error</n-button>
      <n-button type="info" @click="tests">info</n-button>
    </n-space>
    <n-divider title-placement="left">上传文件</n-divider>
    <n-space>

      <upload-file type="box" v-model:file-src="dataForm.avatar" drag chunked accept=".png,.jpg,.jpeg,.svg"/>
      <upload-file type="box" v-model:file-src="dataForm.avatar"  chunked accept=".png,.jpg,.jpeg,.svg"/>
      <upload-file type="button" v-model:file-src="dataForm.avatar"  chunked accept=".png,.jpg,.jpeg,.svg"/>
    </n-space>
    <div style="padding: 10px 0;">
      <n-code language="html" :code="upload" show-line-numbers/>
    </div>
    <n-table :single-line="false" size="small" style="width: 1000px">
      <thead>
      <tr>
        <th>名称</th>
        <th>类型</th>
        <th>默认值</th>
        <th>说明</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>type</td>
        <td>box | button</td>
        <td>box </td>
        <td>上传文件外观。box：方块  button：按钮样式 </td>
      </tr>
      <tr>
        <td>file-src</td>
        <td>string | [string, string]</td>
        <td>''</td>
        <td>上传的文件。v-model:file-src</td>
      </tr>
      <tr>
        <td>drag</td>
        <td>boolean</td>
        <td>false</td>
        <td>是否拖拽上传</td>
      </tr>
      <tr>
        <td>chunked</td>
        <td>boolean</td>
        <td>false</td>
        <td>是否分块上传</td>
      </tr>
      <tr>
        <td>accept</td>
        <td>string</td>
        <td>''</td>
        <td>上传文件类型 如：".png,.jpg,.jpeg,.svg"</td>
      </tr>
      <tr>
        <td>fileSize</td>
        <td>number</td>
        <td>2</td>
        <td>上传文件大小(MB)</td>
      </tr>
      </tbody>
    </n-table>
    <n-divider title-placement="left">富文本编辑器</n-divider>
    <ug-jodit-editor v-model:value="editorContent" :theme="appStore.appTheme=='dark'?'dark':''"/>
    <div style="padding: 10px 0;">
      <n-code language="html" :code="editor" show-line-numbers/>
    </div>
    <n-table :single-line="false" size="small" style="width: 1000px">
      <thead>
      <tr>
        <th>名称</th>
        <th>类型</th>
        <th>默认值</th>
        <th>说明</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>value</td>
        <td>string</td>
        <td>'' </td>
        <td>内容</td>
      </tr>
      <tr>
        <td>lang</td>
        <td>zh_cn | ug_cn</td>
        <td>zh_cn</td>
        <td>语言配置</td>
      </tr>
      <tr>
        <td>min-height</td>
        <td>number</td>
        <td>300</td>
        <td>最小高度</td>
      </tr>
      <tr>
        <td>max-height</td>
        <td>number</td>
        <td>500</td>
        <td>最大高度</td>
      </tr>
      </tbody>
    </n-table>
  </n-card>

</template>

<style scoped lang="scss">


</style>
